<template>
  <component :is="tag" :configuration="configuration" :identifier="identifier" />
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import { Config } from '%/pageConfig';
import FormBooleanInput from '#/form/BooleanInput.vue';
import FormEnumInput from '#/form/EnumInput.vue';
import FormNumberInput from '#/form/NumberInput.vue';
import FormStringInput from '#/form/StringInput.vue';
import FormTextareaInput from '#/form/TextareaInput.vue';
import FormUrlInput from '#/form/UrlInput.vue';

@Component({
  components: {
    FormBooleanInput,
    FormEnumInput,
    FormNumberInput,
    FormStringInput,
    FormTextareaInput,
    FormUrlInput,
    FormArrayInput: () => import('#/form/ArrayInput.vue'),
    FormObjectInput: () => import('#/form/ObjectInput.vue'),
    FormUnionInput: () => import('#/form/UnionInput.vue')
  }
})
export default class FormInput extends Vue {
  @Prop(Object) private readonly configuration!: Config;

  @Prop(String) private readonly identifier!: string;

  private get tag() {
    return typeof this.configuration.type === 'object'
      ? 'form-union-input'
      : this.configuration.enum
        ? 'form-enum-input'
        : `form-${this.configuration.type}-input`;
  }
}
</script>
